{% if isFramework("vue") %}
```js
<template>
    <ag-grid-vue :columnDefs="columnDefs" ...other properties>
    </ag-grid-vue>
</template>

<script>
//...other imports
import {AgGridVue} from "ag-grid-vue3";

// define Cell Component to be reused
const ColourComponent = {
  template: '<span :style="{color: params.color}">{{params.value}}</span>'
};

export default {
 components: {
     AgGridVue,
     ColourComponent
 },
 data() {
     return {
         columnDefs: [
             {
                 headerName: "Colour 1",
                 field: "value",
                 cellRenderer: 'ColourComponent',
                 cellRendererParams: {
                      color: 'guinnessBlack'
                 }
             },
             {
                 headerName: "Colour 2",
                 field: "value",
                 cellRenderer: 'ColourComponent',     
                 cellRendererParams: {
                      color: 'irishGreen'
                 }
             }
         ]
     }
 }
 //...other properties & methods
}
</script>
```
{% /if %}
